<template>
	<view class="contain">
		<!-- 头部区域 -->
		<view class="flex  padding justify-end">
			<button class="cu-btn round bg-white text-xl text-bold" @click="save()">保存</button>
			<button class="cu-btn round bg-cyan" @click="publish()">发布</button>
		</view>
		<!-- 上传图片区域 -->
		<view class="flex  justify-start">
			<view class="upload text-center" @click="upload_img()">
				<view class=" text-sl ">
					<text class=" cuIcon-cameraadd"></text>
				</view>
				<view>上传图片</view>
			</view>
			<view class="upload text-center">
				<view class=" text-sl ">
					<text class=" cuIcon-record"></text>
				</view>
				<view>上传视频</view>
			</view>

		</view>
		<!-- 标题 -->
		<view class="title">
			<input class="solids-bottom" style="width: 90%;margin-left: 5%;" placeholder="填上美食名称更容易上首页哦~"
				placeholder-style="font-weight:bold;color:gray" v-model="title" />
		</view>
		<!-- 内容 -->
		<view class="content">
			<textarea style="width: 90%;margin-left: 5%;" placeholder="美好的食物需要推文来记录和分享~" v-model="content"></textarea>
		</view>

		<hr style="height: 20rpx;background-color: #F8F8F8;border: 0;" />
		<!-- 价位 -->
		<view class="flex">
			<view class="flex-sub padding-sm margin-xs radius"
				style="text-align: center;font-size:35rpx;font-weight: bold;color: #000000;">价位</view>
			<view class="flex-sub  padding-sm margin-xs radius"><input placeholder="输入价位"
					style="border-bottom: #000000 1px solid;display: inline;" v-model="price" /></view>
		</view>
		<hr style="height: 20rpx;background-color: #F8F8F8;border: 0;" />
		<!-- 地点选择 -->
		<view class="flex">
			<view class="flex-sub padding-sm margin-xs radius"
				style="text-align: center;font-size:35rpx;font-weight: bold;color: #000000;">选择美食地点</view>
			<view class="flex-sub  padding-sm margin-xs radius">
				<picker style="float: left;" @change="bindPickerChange" :value="index" :range="array">
					<view class="uni-input">{{array[index]}}</view>
				</picker>
				<text style="margin-left: 20rpx;vertical-align: middle;" class="cuIcon-unfold"></text>
			</view>
		</view>

		<hr style="height: 20rpx;background-color: #F8F8F8;border: 0;" />
		<!-- 个人推荐指数 -->
		<view class="flex">
			<view class="flex-sub padding-sm margin-xs radius"
				style="text-align: center;font-size:35rpx;font-weight: bold;color: #000000;">个人推荐指数</view>
			<view class="flex-sub  padding-sm margin-xs radius">
				<uni-rate v-model="rate" allowHalf="true" @change="onChange" />
			</view>
		</view>

		<hr
			style="margin-top: 10rpx;height: 100rpx;width:100%;background-color:#F8F8F8;border: 0;position: absolute;bottom: 0;" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				//是否从草稿箱来
				flag: false,
				// 
				_id: "",
				openid: "",
				// 标题
				title: "",
				// 内容
				content: "",
				// 价位
				price: "",
				// 地点
				location: "华源",
				// 评分
				rate: "",
				// 上传图片后地址
				fileID: "",
				index: 0,
				array: ['华源', '北苑', '东苑', '南苑', '校周边'],
			}
		},
		onLoad(option) {
			let _this = this
			this.openid = uni.getStorageSync('openid')
			const eventChannel = this.getOpenerEventChannel()
			// 监听acceptDataFromOpenerPage事件，获取上一页面通过eventChannel传送到当前页面的数据
			eventChannel.on('acceptDataFromOpenerPage', function(data) {
				console.log(data)
				_this.content = data.data.content;
				_this.title = data.data.title;
				for (let i = 0; i < _this.array.length; i++) {
					if (_this.array[i] == data.data.location) {
						_this.index = i;
						break;
					}
				}
				_this.rate = data.data.rate;
				_this.price = data.data.price
				_this._id = data.data._id
				_this.flag = true
			})
		},
		methods: {
			// 地点选择
			bindPickerChange: function(e) {
				console.log('picker发送选择改变，携带值为', e.target.value)
				this.index = e.target.value
				this.location = this.array[e.target.value]
			},
			// 推荐指数
			onChange: function(e) {
				console.log('rate发生改变:' + JSON.stringify(e))
				//this.rate = JSON.stringify(e)
			},
			// 保存至草稿箱
			save: function(e) {
				let _this = this
				let date = new Date(),
					year = date.getFullYear(),
					month = date.getMonth() + 1,
					day = date.getDate(),
					hour = date.getHours() < 10 ? "0" + date.getHours() : date.getHours(),
					time = year + '-' + month + '-' + day
				const db = uniCloud.database();
				
				let res = db.collection('drafts').add({
					// openid
					openid: _this.openid,
					// 标题
					title: _this.title,
					// 内容
					content: _this.content,
					// 价位
					price: _this.price,
					// 地点
					location: _this.location,
					// 评分
					rate: _this.rate,
					// 时间
					time: time,
					// 图片地址
					fileID: _this.fileID,
				}).then(res => {
					uni.showToast({
						title: '保存成功',
					})
					setTimeout(() => {
						uni.hideToast();
						//关闭提示后跳转
						uni.navigateBack({
							delta: 1
						});
					}, 1500)
				})
			},
			// 发布
			publish: function(e) {
				let _this = this
				
				// if (openid == "")
					const db = uniCloud.database();
					let date = new Date(),
						year = date.getFullYear(),
						month = date.getMonth() + 1,
						day = date.getDate(),
						hour = date.getHours() < 10 ? "0" + date.getHours() : date.getHours(),
						time = year + '-' + month + '-' + day
					//console.log(time)
					const nick_name = uni.getStorageSync('nick_name')
					const head = uni.getStorageSync('avatarUrl')
					let res = db.collection('Tweets').add({
						// openid
						openid: _this.openid,
						// 标题
						title: _this.title,
						// 内容
						content: _this.content,
						// 价位
						price: _this.price,
						// 地点
						location: _this.location,
						// 评分
						rate: _this.rate,
						// 时间
						time: time,
						// 图片地址
						fileID: _this.fileID,
						// 用户名称
						nick_name: nick_name,
						// 用户头像
						head: head,
						// 评论
						comment: []
					}).then(res => {
						if (_this.flag) {
							db.collection("drafts").doc(_this._id).remove()
						}
						uni.showToast({
							title: '发布成功',
						})
						setTimeout(() => {
							uni.hideToast();
							//关闭提示后跳转
							uni.switchTab({
								url: "/pages/home/index"
							});
						}, 1500)
					})
			},
			// 选择上传图片
			upload_img: function(e) {
				let _this = this
				uni.chooseImage({
					count: 1,
					success(res) {
						console.log(res);
						if (res.tempFilePaths.length > 0) {
							let filePath = res.tempFilePaths[0]
							//进行上传操作

							// promise方式
							const result = uniCloud.uploadFile({
								filePath: filePath,
								cloudPath: 'user.jpg',
								onUploadProgress: function(progressEvent) {
									console.log(progressEvent);
									var percentCompleted = Math.round(
										(progressEvent.loaded * 100) / progressEvent.total
									);
								}
							}).then(res => {
								console.log(res)
								_this.fileID = res.fileID
								uni.showToast({
									title: '上传成功',
									duration: 2000
								});
							});
						}
					}
				});
			}
		},
	}
</script>

<style lang="scss">
	page {
		background-color: white;
		height: inherit;
	}

	.contain {
		position: relative;
		height: inherit;
	}

	.header {
		background-color: #F1D1D1;
	}

	// 上传区域
	.upload {
		margin-left: 50rpx;
		padding: 20rpx;
		border: 2rpx dashed gray;
		background-color: #F8F8F8;
	}

	// 标题
	.title {
		margin-top: 100rpx;
	}
</style>
